import { DragEvent, MouseEvent, PropsWithChildren, FC, forwardRef } from 'react'
import './sortable-style.less';


export interface ISortableComponent {
  path?: string;
  onDragOver?: (ev: DragEvent<HTMLElement>) => void;
  onDrop?: (ev: DragEvent<HTMLElement>) => void;
  onDragStart?: (ev: DragEvent<HTMLElement>) => void;
  onDragEnter?: (ev: DragEvent<HTMLElement>) => void;
  onDragLeave?: (ev: DragEvent<HTMLElement>) => void;
  onMouseDown?: (ev: MouseEvent<HTMLElement>) => void;
  onClick?: (ev: MouseEvent<HTMLElement>) => void;

  className?: string;
  style?: object;
  draggable?: boolean;
}

// (event: MouseEvent<HTMLDivElement, MouseEvent>) => void
export type ISortable = PropsWithChildren<ISortableComponent>
export const Sortable: FC<ISortable> = forwardRef((
  {
    path,
    onDragOver,
    onDrop,
    onDragStart,
    onDragEnter,
    onDragLeave,
    onClick,
    onMouseDown,

    children,
    className = '',
    style,
    draggable = false,
  },
  ref: any
) => {
  const __index = 9 + (path ? path.split('-').length : 0);
  const __style = { ...style, zIndex: __index };
  


  return (
    <div
      ref={ref}
      style={__style}
      className={`sortable ${ className }`}
      draggable={draggable}
      onDragOver={onDragOver}
      onDrop={onDrop}
      onMouseDown={onMouseDown}
      onDragStart={onDragStart}
      onDragEnter={onDragEnter}
      onDragLeave={onDragLeave}
      onClick={onClick}
    >
      { children }
    </div>
  )
})
